<!--
 * @Description: 
 * @Date: 2025-07-31 16:43:20
 * @LastEditTime: 2025-08-06 11:12:53
-->
<template>
    <div class="w-100% h-100% bg-#E5EDF8 overflow-auto">
        <van-nav-bar title="套餐选择" left-text="返回" left-arrow @click-left="onClickLeft"></van-nav-bar>
        <div :key="item">
            <img :src="hospitalD.url" class="w-100% h-150px object-cover" /></img>
            <div class="px-10px flex gap-10px p-10px">
                <div class="w-80px h-80px  bg-#fff border-rd-10px flex items-center justify-center">
                    <img src="../assets/img/hong.png" class="w-50px h-50px" />
                </div>
                <div class="flex flex-col items-start gap-5px">
                    <span class="font-bold text-20px">{{ hospitalD.name }}</span>
                    <span class="bg-#51BDF1 color-#fff border-rd-5px text-12px py-1px px-5px">{{ hospitalD.label
                        }}</span>
                    <span class="text-#929C9E">{{ hospitalD.address }}</span>
                </div>
            </div>
        </div>
        <van-notice-bar text="根据本人的标准选择正确的套餐。" color="#000" background="#F3F8FC" left-icon="volume-o" />
        <div class="w-100% px-10px">
            <div v-for="(item, index) in meals" :key="index"
                class="border-rd-5px mt-10px bg-#fff flex flex-col items-start px-15px py-10px gap-5px">
                <div class="flex justify-between w-100%">
                    <div class="flex gap-10px items-center">
                        <span class="bg-#3784FA text-13px py-1px px-5px border-rd-6px box-border color-#fff">常规体检</span>
                        <span class="font-bold text-22px">体检套餐{{ item.amount }}</span>
                    </div>
                    <div class="color-red text-20px font-bold">
                        ￥{{ item.amount }}
                    </div>
                </div>
                <div class="color-#4F637E flex items-center  text-16px">
                    <span>{{ item.gender }}</span>
                    <span class="h-14px w-2px bg-#CFCFCF mx-4px"></span>
                    <span>{{Object.keys(quota).length>0? quota.max :item.maxSelection}}名额</span>
                    <span class="h-14px w-2px bg-#CFCFCF mx-4px"></span>
                    <span>已预约{{Object.keys(quota).length>0? quota.available :item.currentSelection  }}</span>
                </div>


                <van-button :disabled="issubmit == 1"
                    style="align-self: flex-end; background: #3784FA;color: #fff;padding: 7px !important; border-radius: 10px;height: auto;"
                    @click="handleSubmit(item.packageId)">立即预约</van-button>

            </div>

        </div>

    </div>
</template>
<script setup>
import { useRouter, useRoute } from "vue-router";
import { ref, onMounted, onUnmounted } from "vue"
import zhongImg from "../assets/img/zhong.jpg"
import shiImg from "../assets/img/shi.jpg"
import { getExaminationPackages, addReservations, updateUserInfo } from "../api/user"
import store from '../store'
import { Toast } from "vant";
import { connect, disconnect } from '@/utils/websocket'
import emitter from '../utils/eventBus'
const router = useRouter();
const route = useRoute();
const pageType = route.query.type
const hospitalId = route.query.id
const amount = route.query.amount
const issubmit = route.query.issubmit
const packageId = ref()
const hospitalD = ref({})
const meals = ref([
])
const quota = ref({})
onMounted(() => {
    emitter.on('event-name', eventHandler)
})
onUnmounted(() => {
    disconnect()
    emitter.off('event-name');
})
const eventHandler = (data) => {
    quota.value = data
}
const hospitalInfo = ref([
    {
        name: "延安市人民医院",
        label: "公立医院・三甲",
        address: "延安市宝塔区七里铺大街16号",
        url: shiImg
    },
    {
        name: "延安市中医医院",
        label: "公立医院・三甲",
        address: "延安市新区轩辕大道26号",
        url: zhongImg
    }
])
const onClickLeft = () => {
    router.push("/main");
};
onMounted(() => {
    hospitalD.value = hospitalInfo.value[pageType]
    getExaminationPackages({ hospitalId: hospitalId, amount: amount }).then(res => {
        if (res.data.code == 200) {
            meals.value = res.data.data.list
            packageId.value = meals.value[0].packageId
            connect(packageId.value)
        }
    })
})
function handleSubmit(packageId) {
    addReservations({ userId: store.getters.userid, packageId }).then(async res => {
        if (res.data.code == 200) {
            await updateUserInfo({ id: store.getters.userid, issubmit: 1 })
            Toast.success("预约成功");
            setTimeout(() => {
                router.push("/main")
                Toast.clear()
            }, 1500)

        } else {
            Toast.fail(res.data.message);
        }
    })
}
</script>
<style scoped>
:deep(.van-nav-bar__title) {
    color: #000;
}

.sss {
    object-fit: cover;
}

:deep(.van-icon-volume-o:before) {
    color: #11B980;

}
</style>